<template>
  <h2 class="page-title">分配用户</h2>
  <!-- 表单 -->
  <el-form :inline="true" :model="formInline" class="demo-form-inline">
    <el-form-item label="用户名称名称">
      <el-input
        v-model="formInline.userName"
        placeholder="请输入用户名称"
        clearable
        style="width: 250px"
        v-noSpace
      />
    </el-form-item>
    <el-form-item label="手机号码">
      <el-input
        v-model="formInline.mobile"
        type="number"
        placeholder="请输入手机号码"
        style="width: 250px"
        v-noSpace
      />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="Search">搜索</el-button>
      <el-button @click="Reset">重置</el-button>
    </el-form-item>
  </el-form>
  <!-- 新增对话框组件 -->
  <el-button plain @click="AddOpenDialog" class="el-DiaButton" type="primary">
    添加用户
  </el-button>
  <AddAssigningUsers_Dialog
    @confirm="AddConfirm"
    @cancel="AddClose"
    :dialogAdd="dialogAdd"
  />
  <div class="page-content">
    <!-- 表格 -->
    <el-table
      ref="myTableRef"
      :data="tableData"
      border
      stripe
      fit
      empty-text="暂无数据"
      show-header
      v-loading="loading"
      size="default"
      element-loading-text="Loading..."
      :header-cell-style="{ background: '#e7e1fb' }"
      style="width: 100%"
      max-height="600px"
    >
      <el-table-column prop="id" label="序号" />
      <el-table-column prop="userName" label="用户名称" />
      <el-table-column prop="mobile" label="手机" />
      <el-table-column prop="banned" label="状态" v-slot="scope">
        <span :style="scope.row.banned === 0 ? {} : { color: 'red' }">
          {{ scope.row.banned === 0 ? '正常' : '禁用' }}
        </span>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" />
      <el-table-column align="center" fixed="right" label="操作" v-slot="scope">
        <el-button
          link
          type="primary"
          @click="Revoke(scope.row.userId, scope.row.roleId)"
          style="color: #ff4242"
        >
          取消授权
        </el-button>
      </el-table-column>
    </el-table>
  </div>

  <!-- 分页器 -->
  <div class="pagination-block">
    <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[20, 40, 80, 100]"
      background
      layout="total,sizes, prev, pager, next,jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup name="AssignUsersPage">
import { AssigningUsers, CancelRevoke } from '@/api/permission/role';
import { ref, onMounted, computed } from 'vue';
import { useRoute } from 'vue-router';
import AddAssigningUsers_Dialog from '@/components/permission/AddAssigningUsers_Dialog.vue';

const route = useRoute();
// 从路由参数中获取 roleId
const roleId = computed(() => route.params.id);
const userIdArray = ref([]);
// 分页变量
const currentPage = ref(1);
const pageSize = ref(20);
const total = ref(0);

// 对话框
const dialogAdd = ref(false);
// 表单数据
const formInline = ref({
  userName: '',
  mobile: '',
});
// 列表数据+表单校验
const tableData = ref([]);
const loading = ref(true);
const myTableRef = ref(null);
// 分页逻辑
const handleSizeChange = async (val) => {
  pageSize.value = val;
  AssigningUsersList();
};
const handleCurrentChange = (val) => {
  currentPage.value = val;
  AssigningUsersList();
};

// 获取列表
const AssigningUsersList = async () => {
  loading.value = true;
  const res = await AssigningUsers({
    ...formInline.value,
    roleId: roleId.value,
  });
  if (res.data.code === 200) {
    tableData.value = res.data.data;
    total.value = res.data.data.length || 0;
    loading.value = false;
  }
};
// 检查搜索条件是否为空
const hasSearchConditions = () => {
  const { userName, mobile } = formInline.value;
  return userName || mobile;
};
// 搜索
const Search = () => {
  if (!hasSearchConditions()) {
    // eslint-disable-next-line no-undef
    ElMessage({
      message: '请至少输入一个搜索条件',
      type: 'warning',
    });
    return;
  }
  AssigningUsersList();
};
// 重置
const Reset = () => {
  // 如果当前已经是空值状态，直接返回
  if (formInline.value.userName === '' && formInline.value.mobile === '') {
    return;
  }
  formInline.value = {};
  AssigningUsersList();
};
//取消授权
const Revoke = async (userId, roleId) => {
  userIdArray.value = userId;
  const res = await CancelRevoke({
    roleId,
    allotUserIdList: [userIdArray.value],
  });
  if (res.data.code === 200) {
    // eslint-disable-next-line no-undef
    ElMessage.success('取消成功');
    AssigningUsersList();
  } else {
    // eslint-disable-next-line no-undef
    ElMessage.error(res.data.msg);
  }
};

// 添加功能对话框
const AddOpenDialog = () => {
  dialogAdd.value = true;
};
const AddConfirm = () => {
  AssigningUsersList();
};
const AddClose = () => {
  dialogAdd.value = false;
};

onMounted(() => {
  AssigningUsersList();
});
</script>

<style lang="scss" scoped></style>
